// 加载动画指令[自定义指令]

import loadingUrl from "@/assets/loading.svg";
import styles from "./loading.module.less";

// 导出指令的配置对象
// export default {
//   // 以下是常用的钩子函数, 每个都有el, binding两个默认参数
//   // el: 被绑定元素对应的真实DOM, binding: 是一个对象, 描述了指令中提供的信息
//   bind(el, binding) {
//     // 只调用一次, 指令第一次绑定到元素时调用. 在这里可以进行一次性的初始化设置
//     // 根据 binnding.value 的值, 绝对创建或删除img元素

//   },
//   inserted() {
//     // 被绑定元素插入父节点时调用
//   },
//   updata() {
//     // 所在组件的 VNode 更新时调用
//     // 根据 binnding.value 的值, 绝对创建或删除img元素
//   },
//   unbind() {
//     // unbind在元素消失的时候执行
// }
// }

// 若上面要用的函数实现的功能相同, 则可以直接返回function(el, binding) {
//   // 该函数会被同时设置到功能相同的函数中
// }

// 得到el中loading效果的img元素
function getLoadingImage(el) {
  return el.querySelector("img[data-role=loading]");
}
function createLoadingImg() {
  const img = document.createElement("img");
  img.dataset.role = "loading";
  img.src = loadingUrl;
  img.className = styles.loading;
  return img;
}
export default function (el, binding) {
  const curImg = getLoadingImage(el);
  // 根据 binding.value 的值, 决定创建或删除img元素
  if (binding.value) {
    if (!curImg) {
      const img = createLoadingImg();
      el.appendChild(img);
    }
  } else if (curImg) {
    curImg.remove();
  }
}
